{{extend './base.html'}}
{{block 'title'}}
个人中心
{{/block}}
{{block 'style'}}
    <style>
        .list-group-flush li a{
            text-decoration: none;
            color: #4a4a4a;
        }
        .list-group-flush li.li-active a{
            color: #1e7e34;
        }
    </style>
{{/block}}
{{block 'content'}}
<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-12">
            <div class="card">
                <div class="card-header">
                    用户设置
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item li-active">
                        <a href="/user/center">
                            基本信息
                        </a>
                    </li>
                    <li class="list-group-item">
                        <a href="/user/setting">
                            密码修改
                        </a>
                    </li>
                    <li class="list-group-item">
                        <a href="/user/blog">
                            文章管理
                        </a>
                    </li>
                    <li class="list-group-item">
                        <a href="/user/blog/edit">文章编辑</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-6 col-sm-12">
            <form class="Form" method="post">
                <div class="form-group">
                    <label>邮箱</label>
                    <input type="email" class="form-control" name="email" value="{{user.email}}" id="email">
                </div>
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" class="form-control" name="username" value="{{user.username}}" disabled>
                </div>
                <button type="button" class="btn btn-primary" id="user-info">保存</button>
            </form>
        </div>
        <div class="col-md-3 col-sm-12">
            <form class="Form2" method="post" entype="multipart/form-data">
                <div class="form-group">
                    <label>头像设置</label>
                    <input type="file" class="form-control-file" name="avatar">
                    <img src="{{user.avatar}}"
                         alt="..." class="rounded" width="100%">
                </div>
                <button type="submit" class="btn btn-primary">更新</button>
            </form>
        </div>
    </div>
</div>
{{/block}}
{{block 'js'}}
<script type="text/javascript">
    // 更新个人基本信息表单
    $('#user-info').click(function () {
        const email = $('#email').val()
        if (email !== '') {
            $.ajax({
                url: '/user/center',
                type: 'post',
                data: {email},
                dataType: 'json',
                success: function (ret) {
                    if (ret.err_code === 0) {
                        cocoMessage.success(ret.msg)
                    } else {
                        cocoMessage.warning(ret.msg);
                    }
                }
            })
        } else {
            cocoMessage.warning('邮箱必填');
        }
    })
    $('.Form2').on('submit', function (e) { // 修改头像
        e.preventDefault();
        var formData = new FormData(); // 创建表单对象
        var avatar = $('[name="avatar"]'); // 获取input对象
        if (avatar[0].files.length > 0) {
            formData.append('avatar', avatar[0].files[0]); // 设置文件
            $.ajax({
                url: '/user/center',
                type: 'POST',
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                success: function (ret) {
                    if (ret.err_code === 0) {
                        window.location.reload(); // 成功就刷新页面，获取新的user和session
                    } else {
                        alert(ret.msg);
                    }
                }
            });
        } else {
            return false;
        }
    })
</script>
{{/block}}
